<template>
	<view class="payment">
		<!-- 交费页 -->
		<view class="top">
			交费项目：
			<text>手机充值</text>
		</view>
		
		<view>
			手机号码：
			<view class="phonenumber">
				<input type="tel" v-model="phonenumber">
				<button 
				size="mini"
				type="primary"
				plain
				@click="addNum"
				v-if="phonenumber!=''"
				>添加为常用号码</button>
			</view>
		</view>
		
		<view class="money">
			交费金额：
			<view>
				<text v-if="rechargeAmount!=''">￥</text>
				<input type="text" v-model="rechargeAmount">
			</view>
		</view>
		
		<view class="setMoney">
			<view :class="rechargeAmount==50? 'sel':''" @click="setMoney(50)">
				￥ 5 0</view>
			<view :class="rechargeAmount==100? 'sel':''" @click="setMoney(100)">
				￥100</view>
			<view :class="rechargeAmount==200? 'sel':''" @click="setMoney(200)">
				￥200</view>
		</view>
		
		<button
		type="primary"
		:disabled="phonenumber!=''&&rechargeAmount!=''? false:true"
		@click="pay"
		>去 支 付</button>
	</view>
</template>

<script>
	import { http } from "../../utils/request.js"
	export default {
		data() {
			return {
				phonenumber:"13800000000",
				rechargeAmount:""
			};
		},
		// 标题栏点击跳转到交费历史记录页（需要在pages.json页进行相应的配置）
		onNavigationBarButtonTap(){
			uni.navigateTo({
				url:"/pages/living_expenses/record"
			})
		},
		methods:{
			// 添加常用号码和当前时间到缓存中
			addNum(){
				uni.setStorageSync("preserveNum",this.phonenumber)
				// 获取当前时间并格式化为xxxx-xx-xx xx:xx:xx
				let date=new Date()
				let Y = date.getFullYear() + '-';
				let M = date.getMonth()+1  + '-';
				let D = date.getDate() + ' ';
				let h = date.getHours() + ':';
				let m = date.getMinutes() + ':';
				let s = date.getSeconds();
				uni.setStorageSync("preserveTime",Y+M+D+h+m+s)
				uni.showToast({
					title:"添加成功！"
				})
			},
			// 快捷金额面板选择
			setMoney(e){
				this.rechargeAmount=e
			},
			// 去支付
			pay(){
				// 支付金额判断
				if(this.rechargeAmount<=0){
					uni.showToast({
						title:"交费金额必须大于0",
						icon:"none"
					})
					return;
				}
				http({
					url:"/prod-api/api/living/phone/recharge",
					method:"POST",
					data:{
						"paymentType": "电子支付",
						"phonenumber": this.phonenumber,
						"rechargeAmount": this.rechargeAmount,
						"type": "1"
					}
				}).then(res=>{
					if(res.data.code==200){
						uni.showToast({
							title:"支付成功!"
						})
						this.rechargeAmount=""
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.payment{
	padding: 40rpx;
	.top{
		text{
			font-weight: bold;
			font-size: 48rpx;
		}
	}
	view{
		margin-bottom: 40rpx;
		.phonenumber{
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			border-bottom: 1px solid #ccc;
			padding-bottom: 15rpx;
			input{
				width: 400rpx;
				font-weight: bold;
				font-size: 48rpx;
			}
			button{
				font-size: 20rpx;
				margin: 0;
			}
		}
	}
	.money{
		view{
			display: flex;
			align-items: center;
			padding: 15rpx 0;
			border-bottom: 1px solid #ccc;
			font-weight: bold;
			font-size: 48rpx;
			input{
				width: 100%;
				font-size: 48rpx;
			}
		}
	}
	.setMoney{
		display: flex;
		justify-content: space-between;
		font-weight: bold;
		view{
			box-sizing: border-box;
			border-radius: 20rpx;
			width: 200rpx;
			border: 1px solid #007aff;
			color: #007aff;
			text-align: center;
			line-height: 100rpx;
			margin: 0;
			&.sel{
				background-color: #007aff;
				border: 0;
				color: #fff;
			}
		}
	}
	button{
		border-radius: 20rpx;
	}
	button::after{
		border: 0;
	}
}
</style>